<template>
  <div class="components-tree" :style="cssProps">
    <div class="wrap" v-for="(item, index) in list" :key="item.name">
      <div @click="onSelectType(item, index)" class="title-name">
        <i class="el-icon-caret-bottom" v-if="item.children"></i>
        <span :class="item.children ? '' : 'out-width'">{{ item.name }}</span>
      </div>
       <el-collapse-transition>
        <div v-if="activeIndex == index">
          <div
            class="subtitle"
            v-for="(items, idx) in item.children"
            :key="idx"
          >
            <div
              class="l-name"
              @click="selectName(items, idx)"
              :class="childIndex == idx ? 'active' : ''"
            >
              {{ items.name }}
            </div>
            <div class="r-btn">
              <el-button type="primary" icon="el-icon-edit" size='mini'></el-button>
              <el-button type="danger" icon="el-icon-delete" size='mini'></el-button>
            </div>
          </div>
        </div>
       </el-collapse-transition>
    </div>
  </div>
</template>

<script>
export default {
  name: "test",
  data() {
    return {
      list: [
        {
          name: "张三",
          children: [{ name: "李四" }, { name: "王五" }],
        },
        {
          name: "张2",
          children: [{ name: "李四" }, { name: "王五" }],
        },
        {
          name: "张1",
        },
      ],
      activeIndex: -1,
      childIndex: -1,
    };
  },
  computed: {
      cssProps() {
          return {
              '--subHeight': (this.list[this.activeIndex]?.children?.length * 42) + 'px'
          }
      }
  },
  methods: {
    onSelectType(item, index) {
      if(this.activeIndex === index) {
          this.activeIndex = -1;
      } else {
          this.activeIndex = index;
          this.childIndex = -1;
      }  
    },
    selectName(items, idx) {
      this.childIndex = idx;
    },
  }
};
</script>

<style scoped>
.title-name:hover {
    background: rgba(0, 0, 0, 0.1);
}
.subtitle:hover {
    background: rgba(0, 0, 0, 0.1);
}
.components-tree {
  width: 250px;
  background: #ffffff;
  min-height: 60vh;
  height: 100%;
  overflow: auto;
  border: 1px solid #e6ebf5;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}
.subtitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 42px;
}
.title-name {
  font-size: 17px;
  color: #303133;
  padding: 8px 5px;
  box-sizing: border-box;
  cursor: pointer;
}
.title-name.active {
  background-color: #409eff;
  color: white;
}
.subtitle {
  font-size: 16px;
  color: #999a9c;
  padding: 8px 18px;
  box-sizing: border-box;
  cursor: pointer;
}
.subtitle .el-button--small {
  padding: 4px 5px;
  box-sizing: border-box;
}
.subtitle .l-name {
  width: 68%;
}
.subtitle .l-name.active {
  background-color:rgba(0, 0, 0, 0.1);
  color: white;
}
.subtitle:hover .r-btn {
  display: flex;
}
.subtitle .r-btn {
  display: none;
}
.out-width {
  margin-left: 15px;
}
.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s;
  transform-origin: top;
  /* height: var(--subHeight); */
  /* height: 84px; */
}
.fade-enter,
.fade-leave-to {
transform-origin: top;
  transform: scaleY(0);
}
</style>